<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<CustomNavbar title="添加标签">
			<template #right>
				<text class="confirm-link" @click="confirmAddTag">确定</text>
			</template>
		</CustomNavbar>

		<!-- 页面内容 -->
		<view class="content">
			<!-- 输入区域 -->
			<view class="input-section">
				<view class="section-title">
					<text class="title-text">自定义标签</text>
					<text class="title-icon">✏️</text>
				</view>
				
				<view class="input-card">
					<view class="input-item">
						<text class="input-label">标签名称</text>
						<input 
							class="tag-input" 
							v-model="newTag" 
							placeholder="请输入标签名称" 
							maxlength="8"
							@input="onTagInput"
						/>
						<text class="char-count">{{newTag.length}}/8</text>
					</view>
					
					<view class="input-tip">
						<text class="tip-text">💡 建议使用简短有意义的词语，如：理财达人、月光族等</text>
					</view>
				</view>
			</view>

			<!-- 快速选择区域 -->
			<view class="quick-section">
				<view class="section-title">
					<text class="title-text">快速选择</text>
					<text class="title-icon">⚡</text>
				</view>
				
				<view class="quick-card">
					<view class="quick-categories">
						<view 
							v-for="(category, index) in tagCategories" 
							:key="index"
							class="category-item"
							:class="{ active: selectedCategory === category.name }"
							@click="selectCategory(category.name)"
						>
							<text class="category-icon">{{category.icon}}</text>
							<text class="category-name">{{category.name}}</text>
						</view>
					</view>
					
					<view class="quick-tags">
						<view 
							v-for="tag in currentQuickTags" 
							:key="tag"
							class="quick-tag"
							:class="{ disabled: isTagExists(tag) }"
							@click="selectQuickTag(tag)"
						>
							<text class="tag-text">{{tag}}</text>
							<text v-if="isTagExists(tag)" class="tag-status">已添加</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 当前标签预览 -->
			<view class="preview-section">
				<view class="section-title">
					<text class="title-text">当前标签</text>
					<text class="title-count">{{currentTags.length}}/5</text>
				</view>
				
				<view class="preview-card">
					<view v-if="currentTags.length > 0" class="current-tags">
						<view v-for="(tag, index) in currentTags" :key="index" class="preview-tag">
							<text class="tag-text">{{tag}}</text>
						</view>
					</view>
					<view v-else class="empty-tags">
						<text class="empty-text">暂无标签</text>
						<text class="empty-desc">添加一些个人标签来展示你的特色吧~</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作区域 -->
		<view class="bottom-actions">
			<button class="action-btn cancel-btn" @click="cancelAdd">
				<text class="btn-icon">↩️</text>
				<text class="btn-text">取消</text>
			</button>
			<button class="action-btn confirm-btn" @click="confirmAddTag" :disabled="!canAddTag">
				<text class="btn-icon">✅</text>
				<text class="btn-text">确定</text>
			</button>
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/components/CustomNavbar.vue'
	
	export default {
		components: {
			CustomNavbar
		},
		data() {
			return {
				newTag: '',
				currentTags: [],
				selectedCategory: '理财',
				tagCategories: [
					{ name: '理财', icon: '💰' },
					{ name: '性格', icon: '😊' },
					{ name: '职业', icon: '💼' },
					{ name: '兴趣', icon: '🎯' }
				],
				quickTagsData: {
					'理财': ['记账达人', '理财新手', '月光族', '储蓄达人', '投资新手', '精打细算', '开源节流', '财务自由'],
					'性格': ['乐观向上', '细心谨慎', '大大咧咧', '完美主义', '随性自然', '积极进取'],
					'职业': ['上班族', '学生党', '自由职业', '创业者', '家庭主妇', '退休人员'],
					'兴趣': ['旅行爱好', '美食达人', '运动健身', '阅读控', '音乐发烧', '游戏玩家']
				}
			}
		},
		computed: {
			currentQuickTags() {
				return this.quickTagsData[this.selectedCategory] || []
			},
			canAddTag() {
				return this.newTag.trim().length > 0 && !this.isTagExists(this.newTag.trim()) && this.currentTags.length < 5
			}
		},
		onLoad(options) {
			// 获取当前已有的标签
			if (options.currentTags) {
				try {
					this.currentTags = JSON.parse(decodeURIComponent(options.currentTags))
				} catch (e) {
					console.log('解析标签数据失败:', e)
					this.currentTags = []
				}
			}
		},
		methods: {
			// 输入事件处理
			onTagInput() {
				// 限制输入长度和特殊字符
				this.newTag = this.newTag.replace(/[^\u4e00-\u9fa5\w]/g, '')
			},
			
			// 选择分类
			selectCategory(categoryName) {
				this.selectedCategory = categoryName
				uni.vibrateShort()
			},
			
			// 选择快速标签
			selectQuickTag(tag) {
				if (this.isTagExists(tag)) {
					uni.showToast({
						title: '标签已存在',
						icon: 'none'
					})
					return
				}
				
				if (this.currentTags.length >= 5) {
					uni.showToast({
						title: '最多只能添加5个标签',
						icon: 'none'
					})
					return
				}
				
				this.newTag = tag
				uni.vibrateShort()
			},
			
			// 检查标签是否已存在
			isTagExists(tag) {
				return this.currentTags.includes(tag.trim())
			},
			
			// 确认添加标签
			confirmAddTag() {
				const tagToAdd = this.newTag.trim()
				
				if (!tagToAdd) {
					uni.showToast({
						title: '请输入标签名称',
						icon: 'none'
					})
					return
				}
				
				if (this.isTagExists(tagToAdd)) {
					uni.showToast({
						title: '标签已存在',
						icon: 'none'
					})
					return
				}
				
				if (this.currentTags.length >= 5) {
					uni.showToast({
						title: '最多只能添加5个标签',
						icon: 'none'
					})
					return
				}
				
				// 添加标签到当前标签列表
				this.currentTags.push(tagToAdd)
				
				// 通过页面传参返回结果
				const pages = getCurrentPages()
				const prevPage = pages[pages.length - 2]
				
				if (prevPage) {
					// 更新上一页的标签数据
					prevPage.$vm.editForm.tags = [...this.currentTags]
				}
				
				uni.showToast({
					title: '标签添加成功',
					icon: 'success'
				})
				
				// 延迟返回
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},
			
			// 取消添加
			cancelAdd() {
				if (this.newTag.trim()) {
					uni.showModal({
						title: '确认取消',
						content: '确定要放弃当前输入的标签吗？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
		padding-bottom: 140rpx; // 为底部操作区域预留空间
	}
	
	.content {
		padding: 30rpx;
		margin-top: calc(var(--status-bar-height) + 88rpx); // 为导航栏预留空间
	}
	
	/* 导航栏右侧确定链接 */
	.confirm-link {
		font-size: 28rpx;
		color: $cute-primary;
		font-weight: 500;
		padding: 10rpx 15rpx;
		border-radius: 15rpx;
		transition: all 0.3s;
		
		&:hover {
			background: $cute-primary-light;
			color: white;
		}
	}
	
	/* 通用区域样式 */
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
		padding: 0 10rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: $cute-text-primary;
	}
	
	.title-icon {
		font-size: 28rpx;
	}
	
	.title-count {
		font-size: 24rpx;
		color: $cute-text-tertiary;
		background: $cute-bg-tertiary;
		padding: 6rpx 12rpx;
		border-radius: 15rpx;
	}
	
	/* 输入区域 */
	.input-section {
		margin-bottom: 40rpx;
	}
	
	.input-card {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.input-item {
		position: relative;
		margin-bottom: 20rpx;
	}
	
	.input-label {
		display: block;
		font-size: 26rpx;
		color: $cute-text-secondary;
		margin-bottom: 15rpx;
		font-weight: 500;
	}
	
	.tag-input {
		width: 100%;
		padding: 20rpx 80rpx 20rpx 20rpx;
		border: 2rpx solid $cute-border;
		border-radius: $cute-border-radius;
		font-size: 28rpx;
		background: $cute-bg-primary;
		transition: all 0.3s;
		box-sizing: border-box;
		color: $cute-text-primary;
		
		&:focus {
			border-color: $cute-primary;
			background: white;
			outline: none;
			box-shadow: 0 0 0 4rpx rgba(144, 238, 144, 0.1);
			transform: translateY(-2rpx);
		}
		
		&::placeholder {
			color: $cute-text-tertiary;
		}
	}
	
	.char-count {
		position: absolute;
		right: 20rpx;
		top: 50rpx;
		font-size: 22rpx;
		color: $cute-text-tertiary;
		background: white;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid $cute-border;
	}
	
	.input-tip {
		padding: 15rpx;
		background: $cute-bg-primary;
		border-radius: 10rpx;
	}
	
	.tip-text {
		font-size: 22rpx;
		color: $cute-text-tertiary;
		line-height: 1.4;
	}
	
	/* 快速选择区域 */
	.quick-section {
		margin-bottom: 40rpx;
	}
	
	.quick-card {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}
	
	.quick-categories {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid $cute-divider;
	}
	
	.category-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
		padding: 15rpx 10rpx;
		border-radius: 15rpx;
		cursor: pointer;
		transition: all 0.3s;
		
		&:hover {
			background: $cute-bg-primary;
		}
		
		&.active {
			background: $cute-gradient-primary;
			color: white;
			transform: translateY(-3rpx);
			box-shadow: 0 8rpx 25rpx rgba(144, 238, 144, 0.3);
		}
	}
	
	.category-icon {
		font-size: 32rpx;
	}
	
	.category-name {
		font-size: 24rpx;
		font-weight: 500;
	}
	
	.quick-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}
	
	.quick-tag {
		background: $cute-bg-primary;
		color: $cute-text-primary;
		padding: 12rpx 20rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
		cursor: pointer;
		transition: all 0.3s;
		border: 2rpx solid $cute-border;
		position: relative;
		
		&:hover:not(.disabled) {
			background: $cute-primary;
			color: white;
			border-color: $cute-primary;
			transform: translateY(-2rpx);
		}
		
		&.disabled {
			background: $cute-bg-tertiary;
			color: $cute-text-tertiary;
			cursor: not-allowed;
			
			.tag-status {
				position: absolute;
				top: -8rpx;
				right: -8rpx;
				background: $cute-error;
				color: white;
				font-size: 18rpx;
				padding: 2rpx 8rpx;
				border-radius: 10rpx;
			}
		}
	}
	
	/* 预览区域 */
	.preview-section {
		margin-bottom: 40rpx;
	}
	
	.preview-card {
		background: $cute-bg-secondary;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
		min-height: 120rpx;
	}
	
	.current-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}
	
	.preview-tag {
		background: $cute-gradient-accent;
		color: white;
		padding: 12rpx 20rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		box-shadow: $cute-button-shadow;
		animation: tag-appear 0.3s ease-out;
	}
	
	@keyframes tag-appear {
		from {
			opacity: 0;
			transform: scale(0.8) translateY(-10rpx);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}
	
	.empty-tags {
		text-align: center;
		padding: 40rpx 20rpx;
	}
	
	.empty-text {
		display: block;
		font-size: 28rpx;
		color: $cute-text-tertiary;
		margin-bottom: 10rpx;
	}
	
	.empty-desc {
		font-size: 22rpx;
		color: $cute-text-tertiary;
		line-height: 1.4;
	}
	
	/* 底部操作区域 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 30rpx;
		border-top: 2rpx solid $cute-divider;
		display: flex;
		gap: 20rpx;
		box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);
	}
	
	.action-btn {
		flex: 1;
		height: 80rpx;
		border-radius: $cute-border-radius;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s;
		box-shadow: $cute-button-shadow;
		
		&.cancel-btn {
			background: $cute-bg-tertiary;
			color: $cute-text-secondary;
			border: 2rpx solid $cute-border;
			
			&:hover {
				background: $cute-bg-secondary;
				transform: translateY(-2rpx);
			}
		}
		
		&.confirm-btn {
			background: $cute-gradient-primary;
			color: white;
			
			&:hover:not(:disabled) {
				transform: translateY(-2rpx);
				box-shadow: 0 10rpx 30rpx rgba(144, 238, 144, 0.3);
			}
			
			&:disabled {
				background: $cute-bg-tertiary;
				color: $cute-text-tertiary;
				cursor: not-allowed;
				box-shadow: none;
			}
		}
		
		&:active:not(:disabled) {
			transform: translateY(0) scale(0.98);
		}
	}
	
	.btn-icon {
		font-size: 24rpx;
	}
	
	.btn-text {
		font-size: 28rpx;
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.content {
			padding: 20rpx;
		}
		
		.quick-categories {
			flex-wrap: wrap;
			gap: 10rpx;
		}
		
		.category-item {
			min-width: 120rpx;
		}
	}
</style>
